<template>
	<view class="makeup-tutorial-page">
		<!-- Banner图片预留区域 -->
		<view class="banner">
			<image mode="aspectFill"
			       src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04a3e2d96757a9425f8e765164a4fda112image.png"></image>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<view class="header">
				<view class="back-icon" @tap="goBack">
					<text class="iconfont icon-back"></text>
				</view>
				<view class="title">教程定制</view>
				<view class="description">
					选择喜欢的妆容风格 <br>
					我们会结合您的面部信息为您生成专属妆容教程
				</view>
			</view>

			<!-- 风格选项 -->
			<view class="style-options">
				<view v-for="(item, index) in styles" :key="index" :class="{'selected': selectedStyle === item}"
				      class="option" @tap="selectedStyle = item">
					{{ item }}
				</view>
			</view>

			<!-- 生成按钮 -->
			<view class="generate-btn" @tap="generateTutorial">
				生成教程
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';

const styles = ['自然', '烟熏', '新中式', '欧式', '美式', '日式', '韩式', '泰式'];
const selectedStyle = ref('自然');

const goBack = () => {
	uni.navigateBack();
};

const tutorials = {
	'自然': {
		desc: '自然妆教程，适合日常清新淡雅风格。',
		duration: 30,
		difficulty: '★',
		stepsList: [
			{title: '妆前', desc: '洁面保湿，上隔离霜'},
			{title: '底妆', desc: '轻薄粉底液均匀铺开'},
			{title: '眼妆', desc: '淡色眼影晕染眼睑'},
			{title: '口红', desc: '轻涂浅粉色口红'}
		]
	},
	'烟熏': {
		desc: '烟熏妆教程，适合夜晚聚会场合，凸显气质。',
		duration: 50,
		difficulty: '★★★',
		stepsList: [
			{title: '妆前', desc: '妆前乳打底，控油'},
			{title: '底妆', desc: '全脸打厚重底妆'},
			{title: '眼妆', desc: '烟熏色眼影重点晕染'},
			{title: '口红', desc: '哑光深色口红打造气场'}
		]
	},
	'新中式': {
		desc: '新中式妆容，东方魅力与现代时尚的结合。',
		duration: 40,
		difficulty: '★★',
		stepsList: [
			{title: '妆前', desc: '润肤保湿，用妆前乳调整肤色'},
			{title: '底妆', desc: '轻薄底妆突出自然气色'},
			{title: '眼妆', desc: '用棕色眼影打造深邃眼神'},
			{title: '口红', desc: '红棕色口红点缀整体妆容'}
		]
	},
	'欧式': {
		desc: '欧式妆容，突出五官立体感，适合气场强大场合。',
		duration: 55,
		difficulty: '★★★',
		stepsList: [
			{title: '妆前', desc: '保湿+高效控油妆前乳'},
			{title: '底妆', desc: '高遮瑕粉底液全面涂抹'},
			{title: '修容', desc: '重点修容打造立体面部'},
			{title: '眼妆', desc: '深色眼影勾勒深邃眼窝'}
		]
	},
	'美式': {
		desc: '美式妆容，自由随意，强调个性表达。',
		duration: 45,
		difficulty: '★★',
		stepsList: [
			{title: '妆前', desc: '轻薄保湿妆前打底'},
			{title: '底妆', desc: '轻中遮瑕粉底，追求自然妆效'},
			{title: '眼妆', desc: '简单眼影加强睫毛浓密感'},
			{title: '口红', desc: '鲜艳色号突出个性'}
		]
	},
	'日式': {
		desc: '日式妆容，强调甜美可爱，适合日常约会。',
		duration: 35,
		difficulty: '★',
		stepsList: [
			{title: '妆前', desc: '保湿后涂抹提亮妆前乳'},
			{title: '底妆', desc: '轻盈的气垫粉底拍打均匀'},
			{title: '眼妆', desc: '粉嫩眼影增强甜美感'},
			{title: '腮红', desc: '淡淡粉色腮红突出气色'}
		]
	},
	'韩式': {
		desc: '韩式妆容，水润自然，适合年轻潮流人群。',
		duration: 40,
		difficulty: '★★',
		stepsList: [
			{title: '妆前', desc: '水润妆前乳让底妆服帖'},
			{title: '底妆', desc: '水光肌气垫底妆均匀拍打'},
			{title: '眼妆', desc: '珠光眼影增添灵动感'},
			{title: '唇妆', desc: '水润咬唇妆打造甜美效果'}
		]
	},
	'泰式': {
		desc: '泰式妆容，异域风情浓郁，适合旅行度假。',
		duration: 50,
		difficulty: '★★★',
		stepsList: [
			{title: '妆前', desc: '控油保湿妆前乳打底'},
			{title: '底妆', desc: '高遮瑕粉底遮盖瑕疵'},
			{title: '眼妆', desc: '暖色系眼影强化轮廓感'},
			{title: '口红', desc: '亮色口红凸显热情气息'}
		]
	},
};


const generateTutorial = () => {
	const title = selectedStyle.value;
	const tutorialData = tutorials[title];

	uni.navigateTo({
		url: `/pages/index/plantInfo?title=${title}&desc=${tutorialData.desc}&duration=${tutorialData.duration}&difficulty=${encodeURIComponent(tutorialData.difficulty)}&stepsList=${encodeURIComponent(JSON.stringify(tutorialData.stepsList))}`
	});
};


</script>

<style lang="scss" scoped>
.makeup-tutorial-page {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f9f0f3;
}

.banner image {
	width: 100%;
	height: 380rpx;
}

.content {
	flex: 1;
	z-index: 100;
	margin-top: -60rpx;
	background-color: #fff;
	border-radius: 40rpx 40rpx 0 0;
	padding: 80rpx;
	box-shadow: 0 -6rpx 16rpx rgba(0, 0, 0, 0.05);
	overflow-y: auto;
}

.header {
	.title {
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.description {
		font-size: 26rpx;
		color: #666;
		text-align: center;
		line-height: 1.6;
	}
}

.style-options {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #FFEFF2;
	margin-top: 50rpx;
	border-radius: 20rpx;

	.option {
		width: 46%;
		padding: 20rpx 0;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 80rpx;
		margin-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.selected {
		background-color: #ffe0e7;
		color: #d05878;
		font-weight: bold;
	}
}

.generate-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(to right, #ffb6c1, #ffdae6);
	border-radius: 45rpx;
	margin-top: 100rpx;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	color: #333;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.back-icon {
	position: absolute;
	top: 30rpx;
	left: 30rpx;
	font-size: 44rpx;
	color: #333;
}
</style>
